@import '../../style/iconfont/iconfont.css';
@import '../../style/mixin.scss';

@keyframes active {
  from, 50%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.shop-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 0;
  left: 0;
  height: 100%;

}

.activity-menu {
  border-left: 1px solid #3190e8;
  background-color: #fff;

  span:nth-of-type(1) {
    font-weight: bold;
  }
}

.food-container {
  display: flex;
  flex: 1;
  z-index: 15;
  background-color: #fff;
}

.shop-detail-header {
  @include flex;
  position: relative;
  @include wh(100%, auto);
  background-color: rgba(119, 103, 137, .43);

  .header-cover-img {
    width: 0.8rem;
    height: 0.8rem;
    filter: blur(10px);
  }

  .description-header {
    flex: 1;
    position: relative;
    z-index: 10;
    padding: 0.04rem 0 0.04rem 0.04rem;
    overflow: hidden;

    .description-top {
      display: flex;

      .description-right {
        flex: 1;

        .description-title {
          @include font(0.15rem, #fff);
          font-weight: bold;
          width: 100%;
          margin-bottom: 0.1rem;
        }

        .description-text {
          @include font(0.12rem, #fff);
          margin-bottom: 0.1rem;
        }

        .description-promotion {
          @include font(0.13rem, #fff);
        }
      }

      .icon-arrow-right {
        @include positionHCenter;
        @include font(0.12rem, #fff);
        font-weight: bold;
        right: 0.03rem;
        z-index: 11;
      }
    }

    .description-footer {
      @include flex(space-between);
      margin-top: 0.05rem;
      padding-right: 0.03rem;

      p {
        @include font(.15rem, #fff);

        .tip-icon {
          padding: 0 0.04rem;
          border: 0.025rem solid rgb(240, 115, 115);
          border-radius: 0.1rem;
          font-size: .14rem;
          background-color: rgb(240, 115, 115);
          display: inline-block;
          margin-right: 0.1rem;
        }
      }

      .ellipsis {
        width: 80%;
      }

      .icon-arrow-right {
        margin-right: 0.16rem;
      }
    }
  }
}

.change-show-type {
  display: flex;
  background-color: #fff;
  padding: .12rem 0;
  z-index: 15;
  border-bottom: 1px solid #ebebeb;

  div {
    flex: 1;
    text-align: center;

    span {
      @include font(.15rem, #666);
      padding: .2rem .1rem;
      border-bottom: 0.12rem solid #fff;
    }

    .activity-show {
      color: #3190e8;
      border-color: #3190e8;;
    }
  }
}

.menu-container {
  display: flex;
  flex: 1;
  overflow-y: hidden;
  position: relative;

  .menu-left {
    width: .8rem;

    .menu-left-li {
      padding: .1rem .12rem;
      border-bottom: 0.025rem solid #ededed;

      img {
        @include wh(.5rem, .6rem);
      }

      span {
        @include font(.14rem, #666);
      }
    }
  }

  .menu-right {
    flex: 4;
    overflow-y: auto;

    .menu-detail-header {
      width: 100%;
      @include flex(left);
      padding: .1rem;
      position: relative;

      .menu-detail-header-left {
        width: 11rem;
        white-space: nowrap;
        overflow: hidden;

        .menu-item-title {
          @include font(.17rem, #666);
          font-weight: bold;
          margin-right: .2rem;
        }

        .menu-item-description {
          @include font(.15rem, #999);
          width: 30%;
          overflow: hidden;
        }
      }
    }

    .menu-detail-list {
      background-color: #fff;
      padding: .1rem .1rem;
      border-bottom: 1px solid #f8f8f8;
      position: relative;
      overflow: hidden;

      .menu-detail-link {
        display: flex;

        .menu-food-img {
          margin-right: .1rem;

          img {
            @include wh(0.6rem, 0.6rem);
            display: block;
          }
        }

        .menu-food-description {
          width: 100%;

          .food-description-head {
            @include flex(space-between);
            margin-bottom: .1rem;

            .description-foodname {
              @include font(.14rem, #333);
            }

            .attributes-ul {
              display: flex;

              li {
                @include font(.12rem, #4cd964);
                padding: 0.02rem 0.05rem;
                border: 1px solid #4cd964;
                border-radius: 0.3rem;
                margin-right: .1rem;

                p {
                  white-space: nowrap;
                }
              }

              .attribute-new {
                position: absolute;
                top: 0;
                left: 0;
                background-color: #4cd964;
                @include wh(1rem, 1rem);
                @include flex(center, flex-end);
                transform: rotate(-45deg) translate(-.1rem, -1.5rem);
                border: none;
                border-radius: 0;

                p {
                  @include font(.14rem, #fff);
                }
              }
            }
          }

          .food-description-content {
            @include font(.14rem, #999);
          }

          .food-description-sale-rating {
            span {
              @include font(.13rem, #333);
            }

            span:nth-child(1) {
              margin-right: 0.4rem;
            }
          }

          .food-activity {
            span {
              @include font(.12rem, rgb(241, 136, 79));
              border: 1px solid rgb(240, 115, 115);
              border-radius: .06rem;
              padding: .04rem;
              display: inline-block;
            }
          }
        }
      }

      .menu-detail-footer {
        @include font(0.14rem, #f60);
        margin-top: .1rem;
        @include flex(space-between);

        .food-price {
          span:nth-of-type(1) {
            @include font(.14rem, #f60);
            margin-left: .05rem;
          }
        }

        .add-del-icon {
          @include flex;

          div {
            padding: 0 .1rem;
            color: #555;
          }

          div:nth-of-type(1) {
            color: #3190e8;
          }

          div:nth-of-type(3) {
            color: #3190e8;
          }
        }
      }
    }
  }
}

.buy-cart-container {
  position: fixed;
  background-color: #3d3d3f;
  bottom: 0;
  left: 0;
  z-index: 13;
  display: flex;
  @include wh(100%, .46rem);

  .cart-icon-num {
    flex: 1;

    .cart-icon-container {
      display: flex;
      background-color: #3d3d3f;
      position: absolute;
      padding: .3rem;
      border: .18rem solid #444;
      border-radius: 50%;
      left: .5rem;
      top: -.7rem;

      .icon-ziyuan {
        @include font(1.2rem, #fff);
      }

      .cart-list-length {
        position: absolute;
        top: -.25rem;
        right: -.25rem;
        background-color: #ff461d;
        line-height: .7rem;
        min-width: .7rem;
        height: .7rem;
        border-radius: 50%;
        @include font(.15rem, #fff, center);
        font-family: Helvetica Neue, Tahoma, Arial;
      }
    }

    .active-icon {
      background-color: #3190e8;
    }

    .animate {
      animation: active .5s ease-in-out;
    }

    .cart-num {
      @include positionHCenter;
      left: .35rem;

      div {
        color: #fff;
      }

      div:nth-of-type(1) {
        font-size: .18rem;
        font-weight: bold;
        margin-bottom: .1rem;
      }

      div:nth-of-type(2) {
        font-size: .14rem;
      }
    }

  }

  .gotopay {
    position: absolute;
    right: 0;
    background-color: #535356;
    @include wh(.5rem, 100%);
    text-align: center;
    @include flex;

    .gotopay-button-style {
      @include font(.17rem, #fff);
      font-weight: bold;
    }
  }

  .gotopay-active {
    background-color: #4cd964;
    animation: active .5s ease-in-out;
  }
}

.cart-food-list {
  position: fixed;
  width: 100%;
  padding-bottom: .12rem;
  z-index: 12;
  bottom: 0;
  left: 0;
  background-color: #fff;

  header {
    @include flex(space-between);
    padding: .13rem .16rem;
    background-color: #eceff1;

    h4 {
      @include font(.17rem, #666);
    }

    .cart-food-clear {
      @include flex;
      @include font(.16rem, #666);
    }
  }

  .cart-food-details {
    background-color: #fff;
    max-height: 2rem;
    overflow-y: auto;

    .cart-food-li {
      @include flex(space-between);
      padding: .16rem .15rem;

      .cart-list-num {
        width: 55%;

        p:nth-of-type(1) {
          @include font(.17rem, #666);
          font-weight: bold;
        }

        p:nth-of-type(2) {
          @include font(.14rem, #666);
        }
      }

      .cart-list-price {
        font-size: 0;

        span:nth-of-type(1) {
          @include font(.16rem, #f60);
          font-family: Helvetica Neue, Tahoma;
        }

        span:nth-of-type(2) {
          @include font(.17rem, #f60);
          font-weight: bold;
          font-family: Helvetica Neue, Tahoma;
        }
      }

      .cart-list-control {
        @include flex;

        div {
          padding: 0 0.15rem;
          color: #3190e8;
        }

        div:nth-of-type(2) {
          @include font(.17rem, #555);
        }
      }
    }
  }
}

.shop-enter {
  opacity: 0;
}

.shop-enter.shop-enter-active {
  transition: all 1000ms;
  opacity: 0.7;
}

.shop-leave {
  opacity: 1;
}

.shop-leave.shop-leave-active {
  transition: all 300ms;
  opacity: 0;
}


.cart-enter {
  transform: scale(0.1) translateY(.5rem);
}

.cart-enter.cart-enter-active {
  transform: scale(1.0) translateY(1.5rem);
  transition: all .3s ease;
}

.cart-leave {
  transform: scale(1.0) translateY(1.5rem);
}

.cart-leave.cart-leave-active {
  transition: all 0.3s ease;
  transform: scale(0.2);
}